<!--  -->
<template>
  <transition-group class="upload-box" tag="div" @dragover="dragover($event)">
    <template v-if="max > 1">
      <div
        class="upload-item"
        v-for="(item, i) in imgList"
        :key="i"
        :draggable="true"
        @dragstart="dragstart(item, i)"
        @dragenter="dragenter(item, $event)"
        @dragend="dragend(item, $event)"
        @dragover="dragover($event)" >
        <el-image class="upload-img" :class="{'active': dargIndex === i}" :src="item.url" fit="cover" />
        <div class="upload-action">
          <el-icon @click="onPreview(item)"><zoom-in /></el-icon>
          <!-- <el-icon><Download /></el-icon> -->
          <el-icon @click="onDel(i)"><Delete /></el-icon>
        </div>
      </div>
      <div class="upload-item" :key="-1" v-show="max > imgList.length">
        <div class="upload-btn" v-loading="loading">
          <el-icon :size="28"><Picture /></el-icon>
          <p>上传图片</p>
          <input class="upload-input" ref="uploadImg" type="file" accept="image/*" :multiple="multiple" @change="handleFile">
        </div>
      </div>
    </template>
    <div class="upload-item" :style="bosStyle" v-else>
      <el-image v-for="(item, i) in imgList" :key="i" class="upload-img" :src="item.url" fit="cover" />
      <div class="upload-btn" :class="{'opacity': imgList.length}" v-loading="loading">
        <slot name="icon"><el-icon :size="28"><Picture /></el-icon></slot>
        <p v-if="tip">{{ tip }}</p>
        <input class="upload-input" ref="uploadImg" type="file" accept="image/*" :multiple="multiple" @change="handleFile">
      </div>
    </div>
  </transition-group>
  
  <el-dialog v-model="dialogVisible">
    <img class="w-full" :src="dialogImageUrl" />
  </el-dialog>
</template>

<script setup>
// import { upLoadFile } from '@api'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
const props = defineProps({
  modelValue: {
    type: [Array, String],
    default: () => []
  },
  sortType: {
    type: String,
    default: "insert",
  },
  multiple: {
    type: Boolean,
    default: false
  },
  max: {
    type: Number,
    default: 1
  },
  size: {
    type: [Number, String],
    default: 100
  },
  tip: String,
})
const emit = defineEmits(['update:modelValue', 'change'])
const bosStyle = computed(() => {
  return `width: ${props.size}px;height: ${props.size}px;`
})

const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
let imgList = ref([])
watchEffect(() => {
  imgList.value = props.modelValue
})

// 图片上传
const loading = ref(false)
const uploadImg = ref(null)
const handleFile = (e) => {
  console.log('handleFile', uploadImg.value.files)
  // let formData = new FormData()
  // for (let i=0;i<uploadImg.value.files.length;i++){
  //   formData.append(`files${i}`, uploadImg.value.files[i])
  // }
  // loading.value = true
  // upLoadFile(formData).then(res => {
  //   console.log('upLoadFile', res)
  //   const { data } = res
  //   if (props.max > 1) {
  //     imgList.value.push(...data)
  //     imgList.value.splice(props.max)
  //   } else {
  //     imgList.value = data
  //   }
  //   console.log('imgList', imgList)
  //   emit("update:modelValue", imgList.value)
  //   emit("change", imgList.value)
  //   resetUpload()
  // }).catch(err => {
  //   resetUpload()
  // })
}
function resetUpload() {
  loading.value = false
  console.log(uploadImg)
  uploadImg.value.value = null
}
// 图片预览
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const onPreview = (item) => {
  dialogImageUrl.value = item.url
  dialogVisible.value = true
}
// 图片删除
const onDel = (i) => {
  imgList.value.splice(i, 1)
  emit("update:modelValue", imgList.value)
  emit("change", imgList.value)
}
// 图片拖动
let dargIndex = ref(-1);
let oldData = null;
let newData = null;
const dragstart = (value, index) => {
  oldData = value
  dargIndex.value = index;
}
const dragenter = (value, e) => {
  newData = value
  e.preventDefault()
}
const dragover = (e) => {
  e.preventDefault()
}
const dragend = () => {
  if (oldData !== newData) {
    console.log('dragend', oldData, newData)
    let oldIndex = imgList.value.findIndex(item => item.url === oldData.url)
    let newIndex = imgList.value.findIndex(item => item.url === newData.url)
    if (props.sortType == "insert") {
      let newItems = [...imgList.value];
      newItems.splice(oldIndex, 1);
      newItems.splice(newIndex, 0, oldData);
      imgList.value = [...newItems];
    } else {
      [imgList.value[oldIndex], imgList.value[newIndex]] = [
        imgList.value[newIndex],
        imgList.value[oldIndex],
      ]
    }
    emit("update:modelValue", imgList.value)
  }
  dargIndex.value = -1
}
</script>

<style scoped lang="scss">
.upload-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.upload-item {
  position: relative;
  width: 100px;
  height: 100px;
  color: #999;
  background: #ccc;
  border-radius: 4px;
  transition: all 0.3s;
  cursor: pointer;
}
.upload-img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  transition: all 0.3s;
  &.active {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
  }
}
.upload-btn {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 4px;
  &:hover {
    color: #409eff;
    border: 1px dashed #409eff;
  }
  &.opacity {
    opacity: 0;
  }
}
.upload-input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.upload-action {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0,0,0,.5);
  transition: opacity .3s;
  &:hover {
    opacity: 1;
  }
  .el-icon {
    cursor: pointer;
  }
}
</style>
